import { h, VNode } from "vue";
import { AllComponentProps, ImageComponentProps, TextComponentProps } from "./defaultProps";
import {AllFormProps} from "@/store/editor"
export interface PropToFrom {
  component: string;
  // value?: string|number;
  extraProps?: { [key: string]: any }; // 表单额外属性
  text?: string; // 表单显示的文字
  //组合组件中的子组件
  subComponent?: string;
  options?: { text: string | VNode; value: any; label?: string }[];
  initalTransform?: (value: any) => any; //用于需要传递非string给组件时，比如slider需要number
  afterTransform?: (value: any) => any; //发射的事件的值的处理
  valueProp?: string;
  eventName?: string;
  // events?: {[key: string]: any};
}

export type PropsToForms = {
  [P in keyof (AllFormProps)]?: PropToFrom;
};

const defaultMap = {
  component: 'a-input',
  eventName: 'change',
  valueProp: 'value',
  initalTransform: (v: any) => v,
  afterTransform: (e: any) => e
}
const numberToPxHandle = {
  ...defaultMap,
  component: 'a-input-number',
  initalTransform: (v: string) => v ? parseInt(v) : 0,
  afterTransform: (e: number) => e ? `${e}px` : '0'
}

const fontFamilyArr = [
  { text: "微软雅黑", value: "Microsoft YaHei", label: "微软雅黑" },
  { text: "宋体", value: "SimSun", label: "宋体" },
  { text: "黑体", value: "SimHei", label: "黑体" },
  { text: "楷体", value: "KaiTi", label: "楷体" },
  { text: "仿宋", value: "FangSong", label: "仿宋" },
];

const fontFamilyOptions = fontFamilyArr.map((item) => {
  return {
    text: (
      <span style={{ fontFamily: item.value }}>{item.text}</span>
    ) as VNode,
    // text: h('span',{ style: {fontFamily: item.value}},item.text),
    value: item.value,
    label: item.label,
  };
});

export const mapPropsToFroms: PropsToForms = {
  text: {
    text: "文本",
    component: "a-textarea",
    extraProps: {
      rows: 3,
    },
    afterTransform: (value: any) => value.target.value,
  },
  fontSize: {
    text: "字号",
    component: "a-input-number",
    initalTransform: (v: string) => {
      return parseInt(v);
    },
    afterTransform: (value: any) => (value ? `${value}px` : ""),
  },
  lineHeight: {
    text: "行高",
    component: "a-slider",
    extraProps: {
      min: 0,
      max: 3,
      step: 0.1,
    },
    initalTransform: (value: string) => {
      return parseFloat(value);
    },
    afterTransform: (value: any) => value.toString(),
  },
  textAlign: {
    component: "a-radio-group",
    subComponent: "a-radio-button",
    text: "对齐",
    options: [
      { text: "左", value: "left", label: "左" },
      { text: "中", value: "center", label: "中" },
      { text: "右", value: "right", label: "右" },
    ],
    afterTransform: (value: any) => value.target.value,
  },
  fontFamily: {
    text: "字体",
    component: "a-select",
    subComponent: "a-select-option",
    options: [{ value: "", text: "无" }, ...fontFamilyOptions],
  },
  fontWeight: {
    text: "加粗",
    component: "a-switch",
    valueProp: "checked",
    initalTransform: (value: string) => {
      return value === "bold" ? true:  false;
    },
    afterTransform: (value: any) => (value ? "bold" : "normal"),
  },
  fontStyle: {
    text: "斜体",
    component: "a-switch",
    valueProp: "checked",
    initalTransform: (value: string) =>{
      return value === "italic" ? true:  false;
    },
    afterTransform: (value: any) => (value ? "italic" : "normal"),
  },
  textDecoration: {
    text: "删除线",
    component: "a-switch",
    valueProp: "checked",
    initalTransform: (value: string)=> {
      return value === "line-through" ? true:  false;
    },
    afterTransform: (value: any) => (value ? "line-through" : "none"),
  },

  src: {
    component: "ImageSrcProp",
    valueProp: "src",
    
  },


  // sizes
  height: {
    ...defaultMap,
    component: 'a-input-number',
    initalTransform: (v: string) => v ? parseInt(v) : '',
    afterTransform: (e: number) => e ? `${e}px` : '',
    text: '高度'
  },
  width: {
    ...defaultMap,
    component: 'a-input-number',
    initalTransform: (v: string) => v ? parseInt(v) : '',
    afterTransform: (e: number) => e ? `${e}px` : '',
    text: '宽度'
  },
  paddingLeft: {
    ...numberToPxHandle,
    text: '左边距'
  },
  paddingRight: {
    ...numberToPxHandle,
    text: '右边距'
  },
  paddingTop: {
    ...numberToPxHandle,
    text: '上边距'
  },
  paddingBottom: {
    ...numberToPxHandle,
    text: '下边距'
  },
  // border types
  borderStyle: {
    ...defaultMap,
    component: 'a-select',
    subComponent: 'a-select-option',
    text: '边框类型',
    options: [
      { value: 'none', text: '无' },
      { value: 'solid', text: '实线' },
      { value: 'dashed', text: '破折线' },
      { value: 'dotted', text: '点状线' }
    ]
  },
  borderWidth: {
    ...defaultMap,
    component: 'a-slider',
    initalTransform: (v: string) => parseInt(v),
    afterTransform: (e: number) => e + 'px',
    text: '边框宽度',
    extraProps: { min: 0, max: 20 }
  },
  borderRadius: {
    ...defaultMap,
    component: 'a-slider',
    initalTransform: (v: string) => parseInt(v),
    afterTransform: (e: number) => e + 'px',
    text: '边框圆角',
    extraProps: { min: 0, max: 200 }
  },
  // shadow and opactiy
  opacity: {
    ...defaultMap,
    component: 'a-slider',
    text: '透明度',
    initalTransform: (v: number) => v ? v * 100 : 100,
    afterTransform: (e: number) => (e / 100),
    extraProps: { min: 0, max: 100, reverse: true }
  },
  position: {
    ...defaultMap,
    component: 'a-select',
    subComponent: 'a-select-option',
    text: '定位',
    options: [
      { value: '', text: '默认' },
      { value: 'absolute', text: '绝对定位' }
    ]
  },
  left: {
    ...numberToPxHandle,
    text: 'X轴坐标'
  },
  top: {
    ...numberToPxHandle,
    text: 'Y轴坐标'
  },
  
  color: {
    ...defaultMap,
    component: 'color-picker',
    text: '文字颜色'
  },
  backgroundColor: {
    ...defaultMap,
    component: 'color-picker',
    text: '背景颜色'
  },
  borderColor: {
    ...defaultMap,
    component: 'color-picker',
    text: '边框颜色'
  },

  boxShadow: {
    ...defaultMap,
    component: 'shadow-picker'
  },

  actionType: {
    ...defaultMap,
    component: 'a-select',
    subComponent: 'a-select-option',
    text: '点击',
    options: [
      { value: '', text: '无' },
      { value: 'to', text: '跳转到URL' },
    ]
  },
  url: {
    ...defaultMap,
    afterTransform: (e: any) => e,
    text: '链接'
  },
  backgroundImage: {
    ...defaultMap,
    component: 'background-processer',
    initalTransform: (v: string) =>{
      console.log("backgroundImage",v);
      //url(blob:http://localhost:8080/dae90c4a-d60e-4863-9d50-4f2333057111)
      //url("https://static.imooc-lego.com/upload-files/screenshot-889755.png")
        if(v){
            const reg = /\(["'](.+)["']\)/g
            const result = reg.exec(v)
            if(result && result.length>1){
              // console.log(result);
              return result[1]
            } 
        }
        return '';
        
      },
    afterTransform: (e: any) => e ? `url("${e}")` : '',
  },
  backgroundRepeat: {
    ...defaultMap,
    component: 'a-select',
    subComponent: 'a-select-option',
    text: '背景重复',
    options: [
      { value: 'no-repeat', text: '无' },
      { value: 'repeat', text: '重复' },
      { value: 'repeat-x', text: '水平重复' },
      { value: 'repeat-y', text: '垂直重复' },
    ]
  } ,
  backgroundSize: {
    ...defaultMap,
    component: 'a-select',
    subComponent: 'a-select-option',
    text: '背景尺寸',
    options: [
      { value: '', text: '无' },
      { value: 'cover', text: '覆盖' },
      { value: 'contain', text: '包含' },
    ]
  }
};
